<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>积木云-您的私人云空间</title>
  <!-- Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="../../../../css/bootstrap.css">
  <!--layui样式-->
  <link rel="stylesheet" href="../../../../js/vendor/layer/skin/default/layer.css">
  <link rel="stylesheet" href="../../../../js/vendor/element/index.css">
  <!-- style CSS 文件 -->
  <link rel="stylesheet" href="../../../../css/font-awesome.min.css">
  <link rel="stylesheet" href="../../../../fonts/fontawesome-webfont.svg">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    .el-upload__input{
        display: none !important;
    }
    .el-checkbox{ 
        width: 100%;
        margin-left: 0px !important;
    }
    .cover-path {
        width: 148px;
        height: 148px;
        display: block;
    }
  </style>
</head>
<body>
<div class="post-wrapper" id="post" style="height:100%;">
    <el-row style="height:100%;">
        <el-col :span="4" style="height:100%;">
            <el-menu router="true" default-active="postIndex" class="el-menu-vertical-demo" style="height:100%;" @open="handleOpen" @close="handleClose" theme="light">
            <el-submenu index="1">
                <template slot="title">文章</template>
                <el-menu-item index="postIndex">所有文章</el-menu-item>
                <el-menu-item index="postCreate">写文章</el-menu-item>
                <el-menu-item index="postCateIndex">分类目录</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">页面</template>
                <el-menu-item index="pageIndex">所有页面</el-menu-item>
                <el-menu-item index="pageCreate">新建页面</el-menu-item>
            </el-submenu>
            </el-menu>
        </el-col>
        <el-col :span="20" style="padding:10px;padding-top: 20px;">
            <router-view></router-view>
        </el-col>
    </el-row>
</div>
<template id='postIndex'>
    <div>
    <el-row>
        <el-col :span="5">
            <el-form style="margin: 0px;" :inline="true" :model="formInline">
            <el-form-item style="margin-bottom: 0px;margin-top:4px;width: 80px;">
                <el-select size="small" v-model="formInline.status" placeholder="操作">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="-2"></el-option>
                <el-option label="删除" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button size="small" :plain="true" type="info" @click="onSubmit">应用</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="15">
            <el-form style="margin: 0px;" :inline="true" :model="formInline">
            <el-form-item style="margin-bottom: 0px;margin-top:4px;width: 150px;">
                <el-select size="small" v-model="formInline.selectPostCates" placeholder="所有分类目录">
                    <el-option
                    v-for='item in postCates'
                    :label='item.label'
                    :value='item.value'>
                    </el-option>
                </el-select>
            </el-form-item> 
            <el-form-item style="margin-bottom: 0px;margin-top:4px;">
                <el-input size="small" v-model="formInline.name" placeholder="标题"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button size="small" :plain="true" type="info" @click="onSearch">查询</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="4">
            <el-form style="margin: 0px;" :inline="true" :model="formInline" style="float:right; ">
            <el-form-item >
                <router-link to="postCreate"><el-button size="small" type="primary">写文章</el-button></router-link>
            </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <template>
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="title"
                label="标题"
                width="200">
                </el-table-column>
                <el-table-column
                prop="username"
                label="作者">
                </el-table-column>
                <el-table-column
                prop="post_cate_name"
                label="分类目录">
                </el-table-column>
                <el-table-column
                prop="created_at"
                label="日期"
                width="180">
                </el-table-column>
                <el-table-column
                label="状态"
                width="80">
                <template scope="scope">
                    <div v-if="tableData[scope.$index]['status'] === 1">
                        启用中
                    </div>
                    <div v-else>
                        已禁用
                    </div>
                </template>
                </el-table-column>
                <el-table-column
                label="操作"
                width="180">
                <template scope="scope">
                    <el-button
                    @click.native.prevent="editDialog(scope.$index, tableData)"
                    type="text"
                    size="small">
                    编辑
                    </el-button>
                    <el-button
                    @click.native.prevent="forbidRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    <div v-if="tableData[scope.$index]['status'] === 1">
                        禁用
                    </div>
                    <div v-else>
                        启用
                    </div>
                    </el-button>
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    删除
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
            </template>
        </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
        <el-col :span="5">
            <el-form :inline="true" :model="formInline">
            <el-form-item  style="margin-bottom: 0px;width: 80px;">
                <el-select size="small" v-model="formInline.status" placeholder="操作">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="-2"></el-option>
                <el-option label="删除" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-top:-4px;">
                <el-button size="small" :plain="true" type="info" @click="onSubmit">应用</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="19" style="text-align: right">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total=total>
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    </div>
</template>

<template id='postCreate'>
    <div>
    <el-form >
        <el-row>
        <el-col :span="17">
                <el-input type="text" v-model="form.title" placeholder="在此输入标题" ></el-input>
                <div id="content"></div>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="6">
            <div class="panel panel-default">
                <div class="panel-heading">发布</div>
                <div class="panel-body">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">公开</el-radio>
                        <el-radio :label="2">私密</el-radio>
                    </el-radio-group>
                </div>
                <div class="panel-footer">
                    <span style=" height: 30px; display: block;"><el-button size="small" style="float: right;" type="primary" @click="submitForm()">提交</el-button></span>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">分类目录</div>
                <div class="panel-body">
                    <el-checkbox-group v-model="checkedPostCates">
                        <el-checkbox v-for="postCate in postCates" :label="postCate.value">{{postCate.name}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">特色图片</div>
                <div class="panel-body">
                    <el-upload
                    :action="uploadFile"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :on-success="handSuccess"
                    :show-file-list="false"
                    >
                    <img v-if="form.full_cover_path" :src="form.full_cover_path" class="cover-path">
                    <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
        </el-col>
        </el-row>
    </el-form>
    </div>
</template>

<template id='postEdit'>
    <div>
    <el-form >
        <el-row>
        <el-col :span="17">
                <el-input type="text" v-model="form.title" placeholder="在此输入标题" ></el-input>
                <div id="content"></div>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="6">
            <div class="panel panel-default">
                <div class="panel-heading">发布</div>
                <div class="panel-body">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">公开</el-radio>
                        <el-radio :label="2">私密</el-radio>
                    </el-radio-group>
                </div>
                <div class="panel-footer">
                    <span style=" height: 30px; display: block;"><el-button size="small" style="float: right;" type="primary" @click="submitForm()">提交</el-button></span>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">分类目录</div>
                <div class="panel-body">
                    <el-checkbox-group v-model="checkedPostCates">
                        <el-checkbox v-for="postCate in postCates" :label="postCate.value">{{postCate.name}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">特色图片</div>
                <div class="panel-body">
                    <el-upload
                    :action="uploadFile"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :on-success="handSuccess"
                    :show-file-list="false"
                    >
                    <img v-if="form.full_cover_path" :src="form.full_cover_path" class="cover-path">
                    <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
        </el-col>
        </el-row>
    </el-form>
    </div>
</template>

<template id='postCateIndex'>
    <div>
    <el-row>
        <el-col :span="5">
            <el-form style="margin: 0px;" :inline="true" :model="formInline">
            <el-form-item style="margin-bottom: 0px;margin-top:4px;width: 80px;">
                <el-select size="small" v-model="formInline.status" placeholder="操作">
                <el-option label="删除" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button size="small" :plain="true" type="info" @click="onSubmit">应用</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="15">
            <el-form style="margin: 0px;" :inline="true" :model="formInline">
            <el-form-item style="margin-bottom: 0px;margin-top:4px;">
                <el-input size="small" v-model="formInline.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button size="small" :plain="true" type="info" @click="onSearch">查询</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="4">
            <el-form style="margin: 0px;" :inline="true" :model="formInline" style="float:right; ">
            <el-form-item >
                <el-button size="small" type="primary" @click="addDialog">添加新分类目录</el-button>
            </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <template>
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="name"
                label="名称"
                >
                </el-table-column>
                <el-table-column
                prop="slug"
                label="缩略名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="count"
                label="总数"
                width="120">
                </el-table-column>
                <el-table-column
                label="操作"
                width="180">
                <template scope="scope">
                    <el-button
                    @click.native.prevent="editDialog(scope.$index, tableData)"
                    type="text"
                    size="small">
                    编辑
                    </el-button>
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    删除
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
            </template>
        </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
        <el-col :span="5">
            <el-form :inline="true" :model="formInline">
            <el-form-item  style="margin-bottom: 0px;width: 80px;">
                <el-select size="small" v-model="formInline.status" placeholder="操作">
                <el-option label="删除" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-top:-4px;">
                <el-button size="small" :plain="true" type="info" @click="onSubmit">应用</el-button>
            </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    </div>
</template>

<template id='pageIndex'>
    <div>
    <el-row>
        <el-col :span="5">
            <el-form style="margin: 0px;" :inline="true" :model="formInline">
            <el-form-item style="margin-bottom: 0px;margin-top:4px;width: 80px;">
                <el-select size="small" v-model="formInline.status" placeholder="操作">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="-2"></el-option>
                <el-option label="删除" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button size="small" :plain="true" type="info" @click="onSubmit">应用</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="15">
            <el-form style="margin: 0px;" :inline="true" :model="formInline">
            <el-form-item style="margin-bottom: 0px;margin-top:4px;">
                <el-input size="small" v-model="formInline.name" placeholder="标题"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button size="small" :plain="true" type="info" @click="onSearch">查询</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="4">
            <el-form style="margin: 0px;" :inline="true" :model="formInline" style="float:right; ">
            <el-form-item >
                <router-link to="pageCreate"><el-button size="small" type="primary">新建页面</el-button></router-link>
            </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <template>
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="title"
                label="标题"
                width="200">
                </el-table-column>
                <el-table-column
                prop="username"
                label="作者">
                </el-table-column>
                <el-table-column
                prop="created_at"
                label="日期"
                width="180">
                </el-table-column>
                <el-table-column
                label="状态"
                width="80">
                <template scope="scope">
                    <div v-if="tableData[scope.$index]['status'] === 1">
                        启用中
                    </div>
                    <div v-else>
                        已禁用
                    </div>
                </template>
                </el-table-column>
                <el-table-column
                label="操作"
                width="180">
                <template scope="scope">
                    <el-button
                    @click.native.prevent="editDialog(scope.$index, tableData)"
                    type="text"
                    size="small">
                    编辑
                    </el-button>
                    <el-button
                    @click.native.prevent="forbidRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    <div v-if="tableData[scope.$index]['status'] === 1">
                        禁用
                    </div>
                    <div v-else>
                        启用
                    </div>
                    </el-button>
                    <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small">
                    删除
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
            </template>
        </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
        <el-col :span="5">
            <el-form :inline="true" :model="formInline">
            <el-form-item  style="margin-bottom: 0px;width: 80px;">
                <el-select size="small" v-model="formInline.status" placeholder="操作">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="-2"></el-option>
                <el-option label="删除" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-top:-4px;">
                <el-button size="small" :plain="true" type="info" @click="onSubmit">应用</el-button>
            </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="19" style="text-align: right">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total=total>
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    </div>
</template>

<template id='pageCreate'>
    <div>
    <el-form >
        <el-row>
        <el-col :span="17">
                <el-input type="text" v-model="form.title" placeholder="在此输入标题" ></el-input>
                <div id="content"></div>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="6">
            <div class="panel panel-default">
                <div class="panel-heading">发布</div>
                <div class="panel-body">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">公开</el-radio>
                        <el-radio :label="2">私密</el-radio>
                    </el-radio-group>
                </div>
                <div class="panel-footer">
                    <span style=" height: 30px; display: block;"><el-button size="small" style="float: right;" type="primary" @click="submitForm()">提交</el-button></span>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">页面属性</div>
                <div class="panel-body">
                    <el-select v-model="form.pid" placeholder="请选择">
                        <el-option
                        v-for="item in pages"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">页面模板</div>
                <div class="panel-body">
                    <el-input type="text" v-model="form.page_tpl" placeholder="输入模板名称" ></el-input>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">特色图片</div>
                <div class="panel-body">
                    <el-upload
                    :action="uploadFile"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :on-success="handSuccess"
                    :show-file-list="false"
                    >
                    <img v-if="form.full_cover_path" :src="form.full_cover_path" class="cover-path">
                    <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
        </el-col>
        </el-row>
    </el-form>
    </div>
</template>

<template id='pageEdit'>
    <div>
    <el-form >
        <el-row>
        <el-col :span="17">
                <el-input type="text" v-model="form.title" placeholder="在此输入标题" ></el-input>
                <div id="content"></div>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="6">
            <div class="panel panel-default">
                <div class="panel-heading">发布</div>
                <div class="panel-body">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">公开</el-radio>
                        <el-radio :label="2">私密</el-radio>
                    </el-radio-group>
                </div>
                <div class="panel-footer">
                    <span style=" height: 30px; display: block;"><el-button size="small" style="float: right;" type="primary" @click="submitForm()">提交</el-button></span>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">页面属性</div>
                <div class="panel-body">
                    <el-select v-model="form.pid" placeholder="请选择">
                        <el-option
                        v-for="item in pages"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">页面模板</div>
                <div class="panel-body">
                    <el-input type="text" v-model="form.page_tpl" placeholder="输入模板名称" ></el-input>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">特色图片</div>
                <div class="panel-body">
                    <el-upload
                    :action="uploadFile"
                    list-type="picture-card"
                    :on-remove="handleRemove"
                    :on-success="handSuccess"
                    :show-file-list="false"
                    >
                    <img v-if="form.full_cover_path" :src="form.full_cover_path" class="cover-path">
                    <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
        </el-col>
        </el-row>
    </el-form>
    </div>
</template>

  <script src="../../../../js/vendor/jquery/1.11.3/jquery.min.js"></script>
  <script src="../../../../js/vendor/ueditor/ueditor.config.js"></script>
  <script src="../../../../js/vendor/ueditor/ueditor.all.js"></script>
  <script src="../../../../js/vendor/vue/2.0/vue.min.js"></script>
  <script src="../../../../js/vendor/vue/2.0/vue-router.js"></script>
  <script src="../../../../js/vendor/element/index.js"></script>
  <script src="../../../../js/vendor/layer/layer.js"></script>
  <script src="../../../../js/config/config.js"></script>
  <script>

    var router = '';

	// 定义组件
	var postIndex = Vue.extend({
		template: '#postIndex',
		data: function() {
			return {
				tableData: [],
				formInline: {
                    name: '',
                    status: '',
                    selectPostCates: ''
				},
				total: 0,
				multipleSelection: [],
                postCates:[]
			}
		},
		methods: {
			onSubmit:function() {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postSetAllStatus,
					type:'POST',
					data:{
						status:_self.formInline.status,
						selection:_self.multipleSelection
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.showData(_self.currentPage);
							_self.$message({
								message: data.msg,
								type: 'success'
							});
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},
			onSearch:function() {
				this.showData(1);
			},
			deleteRow:function(index, rows) {
				this.setStatus(rows[index]['id'],-1);
				rows.splice(index, 1);
			},
			forbidRow:function(index, rows) {
				if(rows[index]['status'] == 1) {
					status = -2
				} else if(rows[index]['status'] == -2) {
					status = 1
				}
				this.setStatus(rows[index]['id'],status);
			},
			handleSizeChange:function(val) {
				// alert(`每页 ${val} 条`);
			},
			handleCurrentChange:function(val) {
				this.currentPage = val;
				this.showData(val);
			},handleSelectionChange:function(val) {
				this.multipleSelection = val;
			},showData:function(page) {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postIndex,
					type:'GET', // GET
					async:false, // 是否异步
					data:{
						page:page,
						name:_self.formInline.name,
						type:'article',
						selectPostCates:_self.formInline.selectPostCates
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.tableData = data.data.lists;
							_self.total = data.data.total;
                            _self.postCates = data.data.postCates;
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},setStatus:function(id,status) {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postSetStatus,
					type:'GET', // GET
					async:false, // 是否异步
					data:{
						id:id,
						status:status
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.showData(_self.currentPage);
							_self.$message({
								message: data.msg,
								type: 'success'
							});
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},editDialog:function(index, rows) {
				var id = rows[index]['id'];
                router.replace({ name: 'postEdit', params: { postId: id }})
			}
		},
		mounted: function () {
			this.showData(1);
        }
	});

	// 定义组件
	var postCreate = Vue.extend({
		template: '#postCreate',
		data: function() {
			return {
                form:{
                    title:'',
                    description:'',
                    status: 1,
                    cover_path: '',
                    full_cover_path:''
                },
                checkedPostCates: [],
                postCates: [],
                uploadFile:'../../../../'+config.url.fileUpload
			}
		},
		methods: {
            submitForm:function(formName) {
                // ajax请求后台数据
                var _self = this;
                $.ajax({
                    url:'../../../../'+config.url.postStore,
                    type:'POST', // GET
                    async:false, // 是否异步
                    data:{
                        title:_self.form.title,
                        description:_self.form.description,
                        status:_self.form.status,
                        content:_self.editor.getContent(),
                        checkedPostCates:_self.checkedPostCates,
                        cover_path:_self.form.cover_path,
                        type:'article',
                    },
                    dataType:'json',
                    success:function(data,textStatus,jqXHR){
                        if (data.status == 'success') {
                            router.replace('postIndex')
                        } else {
                            _self.$message.error(data.msg);
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                    }
                });

            },
            handleRemove:function(file, fileList) {
                console.log(file, fileList);
            },
            handSuccess:function(file) {
                this.form.cover_path = file.data.path;
                this.form.full_cover_path = file.data.full_path;
            }
		},
		mounted: function () {
            this.editor = UE.getEditor('content');
            var _self = this;
            $.ajax({
                url:'../../../../'+config.url.postCreate,
                type:'GET', // GET
                async:false, // 是否异步
                data:{
                    type:'article',
                },
                dataType:'json',
                success:function(data,textStatus,jqXHR){
                    if (data.status == 'success') {
                        _self.postCates = data.data;
                    } else {
                        _self.$message.error(data.msg);
                    }
                },
                error:function(xhr,textStatus){
                    console.log('错误')
                }
            });
        },
        destroyed:function() {
            this.editor.destroy();
        }
	});

	// 定义组件
	var postEdit = Vue.extend({
		template: '#postEdit',
		data: function() {
			return {
                form:{
                    id:'',
                    title:'',
                    description:'',
                    status: 1,
                    cover_path: '',
                    full_cover_path:''
                },
                checkedPostCates: [],
                postCates: [],
                uploadFile:'../../../../'+config.url.fileUpload
			}
		},
		methods: {
            submitForm:function(formName) {
                // ajax请求后台数据
                var _self = this;
                $.ajax({
                    url:'../../../../'+config.url.postUpdate,
                    type:'POST', // GET
                    async:false, // 是否异步
                    data:{
                        id:_self.form.id,
                        title:_self.form.title,
                        description:_self.form.description,
                        status:_self.form.status,
                        content:_self.editor.getContent(),
                        checkedPostCates:_self.checkedPostCates,
                        cover_path:_self.form.cover_path,
                        type:'article',
                    },
                    dataType:'json',
                    success:function(data,textStatus,jqXHR){
                        if (data.status == 'success') {
                            router.replace('postIndex')
                        } else {
                            _self.$message.error(data.msg);
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                    }
                });

            },
            handleRemove:function(file, fileList) {
                console.log(file, fileList);
            },
            handSuccess:function(res,file) {
                this.form.cover_path = res.data.path;
                this.form.full_cover_path = res.data.full_path;
            }
		},
		mounted: function () {
            var postId = this.$route.params.postId;
            this.editor = UE.getEditor('content');
            var _self = this;
            $.ajax({
                url:'../../../../'+config.url.postEdit,
                type:'GET', // GET
                data:{
                    id:postId,
                    type:'article',
                },
                dataType:'json',
                success:function(data,textStatus,jqXHR){
                    if (data.status == 'success') {
                        _self.form = data.data.data;
                        _self.postCates = data.data.postCates;
                        _self.checkedPostCates = data.data.checkedPostCates;
                        _self.editor.setContent(data.data.data.content);
                    } else {
                        _self.$message.error(data.msg);
                    }
                },
                error:function(xhr,textStatus){
                    console.log('错误')
                }
            });

        },
        destroyed:function() {
            this.editor.destroy();
        }
	});


	// 定义组件
	var pageIndex = Vue.extend({
		template: '#pageIndex',
		data: function() {
			return {
				tableData: [],
				formInline: {
                    name: '',
                    status: '',
                    selectPostCates: ''
				},
				total: 0,
				multipleSelection: [],
                postCates:[]
			}
		},
		methods: {
			onSubmit:function() {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postSetAllStatus,
					type:'POST',
					data:{
						status:_self.formInline.status,
						selection:_self.multipleSelection
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.showData(_self.currentPage);
							_self.$message({
								message: data.msg,
								type: 'success'
							});
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},
			onSearch:function() {
				this.showData(1);
			},
			deleteRow:function(index, rows) {
				this.setStatus(rows[index]['id'],-1);
				rows.splice(index, 1);
			},
			forbidRow:function(index, rows) {
				if(rows[index]['status'] == 1) {
					status = -2
				} else if(rows[index]['status'] == -2) {
					status = 1
				}
				this.setStatus(rows[index]['id'],status);
			},
			handleSizeChange:function(val) {
				// alert(`每页 ${val} 条`);
			},
			handleCurrentChange:function(val) {
				this.currentPage = val;
				this.showData(val);
			},handleSelectionChange:function(val) {
				this.multipleSelection = val;
			},showData:function(page) {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postIndex,
					type:'GET', // GET
					async:false, // 是否异步
					data:{
						page:page,
						name:_self.formInline.name,
						type:'page',
						selectPostCates:_self.formInline.selectPostCates
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.tableData = data.data.lists;
							_self.total = data.data.total;
                            _self.postCates = data.data.postCates;
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},setStatus:function(id,status) {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postSetStatus,
					type:'GET', // GET
					async:false, // 是否异步
					data:{
						id:id,
						status:status
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.showData(_self.currentPage);
							_self.$message({
								message: data.msg,
								type: 'success'
							});
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},editDialog:function(index, rows) {
				var id = rows[index]['id'];
                router.replace({ name: 'pageEdit', params: { postId: id }})
			}
		},
		mounted: function () {
			this.showData(1);
        }
	});

	// 定义组件
	var pageCreate = Vue.extend({
		template: '#pageCreate',
		data: function() {
			return {
                form:{
                    title:'',
                    pid:'',
                    description:'',
                    page_tpl:'page',
                    status: 1,
                    cover_path: '',
                    full_cover_path:''
                },
                pages: [],
                uploadFile:'../../../../'+config.url.fileUpload
			}
		},
		methods: {
            submitForm:function(formName) {
                // ajax请求后台数据
                var _self = this;
                $.ajax({
                    url:'../../../../'+config.url.postStore,
                    type:'POST', // GET
                    async:false, // 是否异步
                    data:{
                        title:_self.form.title,
                        description:_self.form.description,
                        page_tpl:_self.form.page_tpl,
                        status:_self.form.status,
                        content:_self.editor.getContent(),
                        pid:_self.form.pid,
                        cover_path:_self.form.cover_path,
                        type:'page',
                    },
                    dataType:'json',
                    success:function(data,textStatus,jqXHR){
                        if (data.status == 'success') {
                            router.replace('pageIndex')
                        } else {
                            _self.$message.error(data.msg);
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                    }
                });

            },
            handleRemove:function(file, fileList) {
                console.log(file, fileList);
            },
            handSuccess:function(file) {
                this.form.cover_path = file.data.path;
                this.form.full_cover_path = file.data.full_path;
            }
		},
		mounted: function () {
            this.editor = UE.getEditor('content');
            var _self = this;
            $.ajax({
                url:'../../../../'+config.url.postCreate,
                type:'GET', // GET
                async:false, // 是否异步
                data:{
                    type:'page',
                },
                dataType:'json',
                success:function(data,textStatus,jqXHR){
                    if (data.status == 'success') {
                        _self.pages = data.data;
                    }
                },
                error:function(xhr,textStatus){
                    console.log('错误')
                }
            });
        },
        destroyed:function() {
            this.editor.destroy();
        }
	});

	// 定义组件
	var pageEdit = Vue.extend({
		template: '#pageEdit',
		data: function() {
			return {
                form:{
                    id:'',
                    title:'',
                    pid:'',
                    description:'',
                    page_tpl:'',
                    status: 1,
                    cover_path: '',
                    full_cover_path:''
                },
                pages: [],
                uploadFile:'../../../../'+config.url.fileUpload
			}
		},
		methods: {
            submitForm:function(formName) {
                // ajax请求后台数据
                var _self = this;
                $.ajax({
                    url:'../../../../'+config.url.postUpdate,
                    type:'POST', // GET
                    async:false, // 是否异步
                    data:{
                        id:_self.form.id,
                        title:_self.form.title,
                        description:_self.form.description,
                        page_tpl:_self.form.page_tpl,
                        status:_self.form.status,
                        content:_self.editor.getContent(),
                        pid:_self.form.pid,
                        cover_path:_self.form.cover_path,
                        type:'page',
                    },
                    dataType:'json',
                    success:function(data,textStatus,jqXHR){
                        if (data.status == 'success') {
                            router.replace('pageIndex')
                        } else {
                            _self.$message.error(data.msg);
                        }
                    },
                    error:function(xhr,textStatus){
                        console.log('错误')
                    }
                });

            },
            handleRemove:function(file, fileList) {
                console.log(file, fileList);
            },
            handSuccess:function(res,file) {
                this.form.cover_path = res.data.path;
                this.form.full_cover_path = res.data.full_path;
            }
		},
		mounted: function () {
            var postId = this.$route.params.postId;
            this.editor = UE.getEditor('content');
            var _self = this;
            $.ajax({
                url:'../../../../'+config.url.postEdit,
                type:'GET', // GET
                data:{
                    id:postId,
                    type:'page',
                },
                dataType:'json',
                success:function(data,textStatus,jqXHR){
                    if (data.status == 'success') {
                        _self.form = data.data.data;
                        _self.pages = data.data.pages;
                        _self.editor.setContent(data.data.data.content);
                    } else {
                        _self.$message.error(data.msg);
                    }
                },
                error:function(xhr,textStatus){
                    console.log('错误')
                }
            });

        },
        destroyed:function() {
            this.editor.destroy();
        }
	});


    var  postCateCreate = "<div class='postCateCreate-wrapper' id='postCateCreate' style='padding: 20px; padding-right: 40px; font-size: 18px;'>\
    <el-form label-width='100px' class='demo-ruleForm'>\
        <el-form-item label='名称'>\
            <el-input type='text' v-model='form.name' auto-complete='off'></el-input>\
        </el-form-item>\
        <el-form-item label='别名'>\
            <el-input type='text' v-model='form.slug' auto-complete='off'></el-input>\
        </el-form-item>\
        <el-form-item label='父节点'>\
            <el-select v-model='form.pid' placeholder='请选择'>\
                <el-option\
                v-for='item in form.options'\
                :label='item.label'\
                :value='item.value'>\
                </el-option>\
            </el-select>\
        </el-form-item>\
        <el-form-item label='列表模板'>\
            <el-input type='text' v-model='form.lists_tpl' auto-complete='off'></el-input>\
        </el-form-item>\
        <el-form-item label='详情模板'>\
            <el-input type='text' v-model='form.detail_tpl' auto-complete='off'></el-input>\
        </el-form-item>\
        <el-form-item label='分页数量'>\
            <el-input type='text' v-model='form.page_num' auto-complete='off'></el-input>\
        </el-form-item>\
        <el-form-item>\
            <el-button style='float: right;' type='primary' @click='submitForm()'>提交</el-button>\
        </el-form-item>\
    </el-form>\
</div>";

	// 定义组件
	var postCateIndex = Vue.extend({
		template: '#postCateIndex',
		data: function() {
			return {
				tableData: [],
				formInline: {
				name: '',
				status: ''
				},
				multipleSelection: []
			}
		},
		methods: {
			onSubmit:function() {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postCateSetAllStatus,
					type:'POST',
					data:{
						status:_self.formInline.status,
						selection:_self.multipleSelection
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.showData(_self.currentPage);
							_self.$message({
								message: data.msg,
								type: 'success'
							});
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},
			onSearch:function() {
				this.showData(1);
			},
			addDialog:function() {
				// ajax请求后台数据
				var _self = this;
				// 打开对话框
				var index = layer.open({
						type: 1 
						,title: '添加分类目录'
						,area: ['400px', '580px']
						,shade: 0
						,minButton: false
						,maxButton: false
						,taskbar:true
						,moveOut: true
						,content: postCateCreate
						,zIndex: layer.zIndex //重点1
						,success: function(layero){
							layer.setTop(layero); //重点2
						}
					});
				new Vue({
					el: '#postCateCreate',
					data : {
						form:{
							name:'',
							slug:'',
							pid:'',
							lists_tpl:'lists_tpl',
							detail_tpl:'detail_tpl',
							page_num:20,
							options: []
						}
					},
					methods: {
						submitForm:function(formName) {
							// ajax请求后台数据
							var _subSelf = this;
							$.ajax({
								url:'../../../../'+config.url.postCateStore,
								type:'POST', // GET
								async:false, // 是否异步
								data:{
									name:_subSelf.form.name,
									slug:_subSelf.form.slug,
									pid:_subSelf.form.pid,
									lists_tpl:_subSelf.form.lists_tpl,
									detail_tpl:_subSelf.form.detail_tpl,
									page_num:_subSelf.form.page_num,
								},
								dataType:'json',
								success:function(data,textStatus,jqXHR){
									if (data.status == 'success') {
										_self.showData();
										_self.$message({
											message: data.msg,
											type: 'success'
										});
										layer.close(index);
									} else {
										_self.$message.error(data.msg);
									}
								},
								error:function(xhr,textStatus){
									console.log('错误')
								}
							});

						}
					},
					mounted: function () {
						var _subSelf = this;
						$.ajax({
							url:'../../../../'+config.url.postCateCreate,
							type:'GET', // GET
							async:false, // 是否异步
							dataType:'json',
							success:function(data,textStatus,jqXHR){
								if (data.status == 'success') {
									_subSelf.form.options = data.data;
								} else {
									_subSelf.$message.error(data.msg);
								}
							},
							error:function(xhr,textStatus){
								console.log('错误')
							}
						});
					}
				});

			},
			editDialog:function(index, rows) {
				var id = rows[index]['id'];
				var _self = this;
				// 打开对话框
				var index = layer.open({
					type: 1 
					,title: '编辑分类目录'
					,area: ['400px', '580px']
					,shade: 0
					,minButton: true
					,maxButton: true
					,taskbar:true
					,moveOut: true
					,content: postCateCreate
					,zIndex: layer.zIndex //重点1
					,success: function(layero){
						layer.setTop(layero); //重点2
					}
				});
				new Vue({
					el: '#postCateCreate',
					data : {
						form:{
							name:'',
							slug:'',
							pid:'',
							lists_tpl:'lists_tpl',
							detail_tpl:'detail_tpl',
							page_num:20,
							options: []
						}
					},
					methods: {
						submitForm:function(formName) {
							// ajax请求后台数据
							var _subSelf = this;
							$.ajax({
								url:'../../../../'+config.url.postCateUpdate,
								type:'POST', // GET
								async:false, // 是否异步
								data:{
									id:_subSelf.form.id,
									uuid:_subSelf.form.uuid,
									name:_subSelf.form.name,
									slug:_subSelf.form.slug,
									pid:_subSelf.form.pid,
									lists_tpl:_subSelf.form.lists_tpl,
									detail_tpl:_subSelf.form.detail_tpl,
									page_num:_subSelf.form.page_num,
								},
								dataType:'json',
								success:function(data,textStatus,jqXHR){
									if (data.status == 'success') {
										_self.showData();
										_self.$message({
											message: data.msg,
											type: 'success'
										});
										layer.close(index);
									} else {
										_self.$message.error(data.msg);
									}
								},
								error:function(xhr,textStatus){
									console.log('错误')
								}
							});

						}
					},
					mounted: function () {
						var _subSelf = this;
						$.ajax({
							url:'../../../../'+config.url.postCateEdit,
							type:'GET', // GET
							async:false, // 是否异步
							data:{
								id:id
							},
							dataType:'json',
							success:function(data,textStatus,jqXHR){
								if (data.status == 'success') {
									_subSelf.form = data.data;
								} else {
									_self.$message.error(data.msg);
								}
							},
							error:function(xhr,textStatus){
								console.log('错误')
							}
						});
					}
				});
			},
			deleteRow:function(index, rows) {
				this.setStatus(rows[index]['id'],-1);
				rows.splice(index, 1);
			},
			forbidRow:function(index, rows) {
				if(rows[index]['status'] == 1) {
					status = -2
				} else if(rows[index]['status'] == -2) {
					status = 1
				}
				this.setStatus(rows[index]['id'],status);
			},handleSelectionChange:function(val) {
				this.multipleSelection = val;
			},showData:function() {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postCateIndex,
					type:'GET', // GET
					async:false, // 是否异步
					data:{
						name:_self.formInline.name
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.tableData = data.data;
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			},setStatus:function(id,status) {
				// ajax请求后台数据
				var _self = this;
				$.ajax({
					url:'../../../../'+config.url.postCateSetStatus,
					type:'GET', // GET
					async:false, // 是否异步
					data:{
						id:id,
						status:status
					},
					dataType:'json',
					success:function(data,textStatus,jqXHR){
						if (data.status == 'success') {
							_self.showData();
							_self.$message({
								message: data.msg,
								type: 'success'
							});
						} else {
							_self.$message.error(data.msg);
						}
					},
					error:function(xhr,textStatus){
						console.log('错误')
					}
				});
			}
		},
		mounted: function () {
			this.showData();
        }
	});

	// 定义路由
    router = new VueRouter({
        routes: [
            { path: '/', name: 'postIndex', component: postIndex },
            { path: '/postIndex', name: 'postIndex', component: postIndex },
            { path: '/postCreate', name: 'postCreate', component: postCreate },
            { path: '/postEdit', name: 'postEdit', component: postEdit },
            { path: '/pageIndex', name: 'pageIndex', component: pageIndex },
            { path: '/pageCreate', name: 'pageCreate', component: pageCreate },
            { path: '/pageEdit', name: 'pageEdit', component: pageEdit },
            { path: '/postCateIndex', name: 'postCateIndex', component: postCateIndex }
        ]
    });

	new Vue({
		el: '#post',
		router:router,
		methods: {
			handleOpen:function(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose:function(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	});

  </script>
</body>
</html>